<template>
    <div class="card">
        <div class="card-header text-center">
            <h3>工控机管理</h3>
        </div>
        <div class="card-body">
            <el-table :data="userList" style="width: 100%" height="600" max-height="600" @sort-change="sortChange">
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ (current_page - 1) * pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="序列号" sortable="custom" />
                <el-table-column prop="enable" label="是否启用">
                    <template #default="scope">
                        <el-switch class="ml-2" v-model="scope.row.enable"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="edit(scope.row.id, scope.row.enable, scope.row.company.id)" />
                    </template>
                </el-table-column>
                <el-table-column prop="company.companyName" label="公司名称">
                    <template #default="scope">
                        <el-select v-model="scope.row.company.id" class="m-2"
                            @change=" edit(scope.row.id, scope.row.enable, scope.row.company.id)">
                            <el-option v-for="company in adminCompanyList" :key="company.id" :label="company.companyName"
                                :value="company.id" />
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="card-footer">
            <el-row justify="center">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="total" :current_page="current_page"
                    :page-sizes="[10, 50, 100]" :page-size="pageSize" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" />
            </el-row>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import { postRequest } from '@/utils/http';
import { message } from '@/utils/messageBox';
import { userRole } from "@/global";
export default {
    setup() {
        let total = ref(0);
        let current_page = ref(1);
        let pageSize = ref(10);
        let userList = ref([]);
        let sortBy = ref("id");
        let desc = ref(false);
        let groupList = ref([]);
        let adminCompanyList = ref([{ "id": 0, "companyName": "未绑定" }]);

        const select = () => {
            postRequest("/device/select", {
                page: current_page.value,
                size: pageSize.value,
                sortBy: sortBy.value,
                desc: desc.value,
            }, function success(resp) {
                if (resp.code == '200') {
                    total.value = resp.data.totalElements;
                    userList.value = resp.data.content;
                } else {
                    message(resp.msg, 'error');
                }
            }, function error(resp) {
                // console.log();
                message(resp.responseJSON.msg, 'error');
            })
        }
        const findCompany = () => {
            postRequest("/company/all", {}, function success(resp) {
                console.log(resp);
                if (resp.code == '200') {
                    adminCompanyList.value = adminCompanyList.value.concat(resp.data);
                }
            })
        }
        const sortChange = (column) => {
            const prop = column.prop
            if (prop) {
                if (column.order == 'ascending') {
                    desc.value = false;
                    sortBy.value = prop
                } else if (column.order == 'descending') {
                    desc.value = true;
                    sortBy.value = prop
                } else if (column.order == null) {
                    sortBy.value = 'id'
                    desc.value = false;
                }
                select();
            }
        }
        findCompany();

        select();
        return {
            userList,
            total,
            pageSize,
            current_page,
            groupList,
            userRole,
            adminCompanyList,
            select,
            sortChange,
        }
    },
    methods: {
        handleSizeChange(size) {
            this.pageSize = size;
            this.select();
        },
        handleCurrentChange(currentPage) {
            this.current_page = currentPage;
            this.select();
        },
        edit(id, enable, companyId) {
            console.log(id, enable, companyId);
            postRequest("/device/edit", {
                id: id,
                enable: enable,
                companyId: companyId
            }, function success(resp) {
                if (resp.code == 200) {
                    message(resp.msg, 'success');
                } else {
                    message(resp.msg, 'warning');
                }
            })
        }
    },
}
</script>

<style scoped></style>